<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>React 常用 | 海内存知已，天涯若比邻</title><meta name="keywords" content="前端,React"><meta name="author" content="mowei"><meta name="copyright" content="mowei"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="01 三个API12345678&#x2F;&#x2F; 创建第一个divconst div &#x3D; React.createElement(&amp;#x27;div&amp;#x27;, &amp;#123;&amp;#125;, &amp;#x27;我是一个div&amp;#x27;, button);&#x2F;&#x2F; 获取根元素const root &#x3D; ReactDOM.createRoot(document.getElementById(&amp;#x27;root&amp;#x27;">
<meta property="og:type" content="article">
<meta property="og:title" content="React 常用">
<meta property="og:url" content="https://gitee.com/momomomowei/blog/web/01%20React%20%E5%B8%B8%E7%94%A8/index.html">
<meta property="og:site_name" content="海内存知已，天涯若比邻">
<meta property="og:description" content="01 三个API12345678&#x2F;&#x2F; 创建第一个divconst div &#x3D; React.createElement(&amp;#x27;div&amp;#x27;, &amp;#123;&amp;#125;, &amp;#x27;我是一个div&amp;#x27;, button);&#x2F;&#x2F; 获取根元素const root &#x3D; ReactDOM.createRoot(document.getElementById(&amp;#x27;root&amp;#x27;">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/momomomowei/images/react.png">
<meta property="article:published_time" content="2024-04-21T05:32:06.000Z">
<meta property="article:modified_time" content="2024-04-21T07:24:14.423Z">
<meta property="article:author" content="mowei">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="React">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/momomomowei/images/react.png"><link rel="shortcut icon" href="/media/favicon.png"><link rel="canonical" href="https://gitee.com/momomomowei/blog/web/01%20React%20%E5%B8%B8%E7%94%A8/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'React 常用',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2024-04-21 15:24:14'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    document.addEventListener('pjax:complete', detectApple)})(window)</script><meta name="generator" content="Hexo 5.4.2"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/media/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">41</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">29</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 目录</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/images/react.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">海内存知已，天涯若比邻</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 目录</span><i class="fas fa-chevron-down expand hide"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">React 常用</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-04-21T05:32:06.000Z" title="发表于 2024-04-21 13:32:06">2024-04-21</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-04-21T07:24:14.423Z" title="更新于 2024-04-21 15:24:14">2024-04-21</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">7.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>35分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="React 常用"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h3 id="01-三个API"><a href="#01-三个API" class="headerlink" title="01 三个API"></a>01 三个API</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建第一个div</span></span><br><span class="line"><span class="keyword">const</span> div = <span class="title class_">React</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;div&#x27;</span>, &#123;&#125;, <span class="string">&#x27;我是一个div&#x27;</span>, button);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取根元素</span></span><br><span class="line"><span class="keyword">const</span> root = <span class="title class_">ReactDOM</span>.<span class="title function_">createRoot</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;root&#x27;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将元素在根元素中显示</span></span><br><span class="line">root.<span class="title function_">render</span>(div);</span><br></pre></td></tr></table></figure>
<h3 id="02-函数组件"><a href="#02-函数组件" class="headerlink" title="02 函数组件"></a>02 函数组件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>我是App组件！<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 导出App</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="comment">// 获取根元素</span></span><br><span class="line"><span class="keyword">const</span> root = <span class="title class_">ReactDOM</span>.<span class="title function_">createRoot</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;root&#x27;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将元素在根元素中显示</span></span><br><span class="line">root.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">APP</span>/&gt;</span></span>);</span><br></pre></td></tr></table></figure>
<h3 id="03-事件"><a href="#03-事件" class="headerlink" title="03 事件"></a>03 事件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">handleClick</span> = event =&gt; &#123;</span><br><span class="line">        event.<span class="title function_">preventDefault</span>(); <span class="comment">// 取消默认行为</span></span><br><span class="line">        event.<span class="title function_">stopPropagation</span>(); <span class="comment">// 取消事件的冒泡</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(e);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 使用回调函数格式可以传递参数，如传递循环时的item项</span></span><br><span class="line">     <span class="keyword">const</span> <span class="title function_">handleClick2</span> = item =&gt; &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">onClick</span>=<span class="string">&#123;handleClick&#125;</span> <span class="attr">onClick</span>=<span class="string">&#123;</span> () =&gt;</span> handleClick(e) &#125;&gt;</span></span><br><span class="line"><span class="language-xml">            hello world</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h3 id="04-传递属性"><a href="#04-传递属性" class="headerlink" title="04 传递属性"></a>04 传递属性</h3><p>常用属性：</p>
<ul>
<li>props.className</li>
<li>props.childern（slot）</li>
<li>props.onXxx（事件）</li>
</ul>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="title class_">Children</span> data=<span class="string">&quot;helloWorld&quot;</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Children</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(porps)</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;porps.data&#125;</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Children</span>;</span><br></pre></td></tr></table></figure>
<h3 id="05-useState"><a href="#05-useState" class="headerlink" title="05 useState()"></a>05 useState()</h3><p>只能用在函数组件中</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;useState&#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// state是简单值</span></span><br><span class="line">  <span class="keyword">const</span> [counter, setCounter] = <span class="title function_">useState</span>(<span class="number">1</span>);</span><br><span class="line">  <span class="keyword">const</span> <span class="title function_">addHandler</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// setCounter(counter + 1); // 写法1</span></span><br><span class="line">      </span><br><span class="line">    <span class="comment">// pren 表示最新的值，返回值是要设置的值</span></span><br><span class="line">    <span class="title function_">setCounter</span>(<span class="function"><span class="params">prev</span> =&gt;</span> prev + <span class="number">1</span>) <span class="comment">// 写法2</span></span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> <span class="title function_">lessHandler</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="title function_">setCounter</span>(counter-<span class="number">1</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// --------------------------------</span></span><br><span class="line">    <span class="comment">// state如果是个对象</span></span><br><span class="line">    <span class="keyword">const</span> [user, setUser] = <span class="title function_">useState</span>(&#123;<span class="attr">name</span>: <span class="string">&#x27;孙悟空&#x27;</span>, <span class="attr">age</span>: <span class="number">18</span>&#125;);</span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">updateUserHandler</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        <span class="title function_">setUser</span>(&#123;...user, <span class="attr">name</span>: <span class="string">&#x27;猪八戒&#x27;</span>&#125;);</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&#123;</span>&#x27;<span class="attr">app</span>&#x27;&#125;&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;counter&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;lessHandler&#125;</span>&gt;</span>减<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;addHandler&#125;</span>&gt;</span>加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">     </span></span><br><span class="line"><span class="language-xml">     <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">     <span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;user.name&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">     <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;updateUserHandler&#125;</span>&gt;</span>改变值<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 导出App</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h3 id="06-useRef"><a href="#06-useRef" class="headerlink" title="06 useRef()"></a>06 useRef()</h3><p>1.创建一个存储DOM对象的容器</p>
<p>​        使用 useRef() 钩子函数</p>
<p>​         钩子函数的注意事项：</p>
<p>​         ① React中的钩子函数只能用于函数组件或自定义钩子</p>
<p>​        ② 钩子函数只能直接在函数组件中调用</p>
<p>2.将容器设置为想要获取DOM对象元素的ref属性</p>
<pre><code>     &lt;h1 ref=&#123;xxx&#125;&gt;....&lt;/h1&gt;
</code></pre><p>React会自动将当前元素的DOM对象，设置为容器current属性</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> h1Ref = <span class="title function_">useRef</span>(); <span class="comment">// 创建一个容器</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">clickHandler</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(h1Ref);</span><br><span class="line">        h1Ref.<span class="property">current</span>.<span class="property">innerText</span> = <span class="string">&#x27;嘻嘻！&#x27;</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&#123;</span>&#x27;<span class="attr">app</span>&#x27;&#125;&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">&quot;header&quot;</span> <span class="attr">ref</span>=<span class="string">&#123;h1Ref&#125;</span>&gt;</span>我是标题&#123;count&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;clickHandler&#125;</span>&gt;</span>获取<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 导出App</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h3 id="07-表单双向绑定"><a href="#07-表单双向绑定" class="headerlink" title="07 表单双向绑定"></a>07 表单双向绑定</h3><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123;useState&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">LogsForm</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> [inputDesc, setInputDesc] = <span class="title function_">useState</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 监听内容的变化</span></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">descChangeHandler</span> = (<span class="params">e</span>) =&gt; &#123;</span><br><span class="line">        <span class="title function_">setInputDesc</span>(e.<span class="property">target</span>.<span class="property">value</span>);</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">formSubmitHandler</span> = (<span class="params">e</span>) =&gt; &#123;</span><br><span class="line">        <span class="comment">// 取消表单的默认行为</span></span><br><span class="line">        e.<span class="title function_">preventDefault</span>();</span><br><span class="line">        <span class="comment">// 清空表单项</span></span><br><span class="line">        <span class="title function_">setInputDesc</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">form</span> <span class="attr">onSubmit</span>=<span class="string">&#123;formSubmitHandler&#125;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;form-item&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">label</span> <span class="attr">htmlFor</span>=<span class="string">&quot;desc&quot;</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">onChange</span>=<span class="string">&#123;descChangeHandler&#125;</span> <span class="attr">value</span>=<span class="string">&#123;inputDesc&#125;</span> <span class="attr">id</span>=<span class="string">&quot;desc&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;form-btn&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">button</span>&gt;</span>添加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">LogsForm</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="08-portal"><a href="#08-portal" class="headerlink" title="08 portal"></a>08 portal</h3><p>组件默认会作为父组件的后代渲染到页面中，通过portal可以将组件渲染到页面中的指定位置</p>
<p>使用方法：</p>
<ul>
<li>在index.html添加一个新的元素</li>
<li>通过ReactDOM.createPortal(组件，目标位置)作为返回值创建元素</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--portal使用--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;backdrop-root&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ReactDOM</span> <span class="keyword">from</span> <span class="string">&quot;react-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取backdrop的根元素</span></span><br><span class="line"><span class="keyword">const</span> backdropRoot = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;backdrop-root&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Backdrop</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">ReactDOM</span>.<span class="title function_">createPortal</span>(</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;props.children&#125;</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>,</span><br><span class="line">        backdropRoot);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Backdrop</span>;</span><br></pre></td></tr></table></figure>
<h3 id="09-css-模块化"><a href="#09-css-模块化" class="headerlink" title="09 css 模块化"></a>09 css 模块化</h3><p>使用步骤：</p>
<p>1.创建一个xxx.module.css</p>
<p>2.在组件中引入css</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import styles from &#x27;./App.module.css&#x27;;</span><br></pre></td></tr></table></figure>
<p>3.通过styles来设置类</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">className=&#123;styles.Xxx&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* App.module.css */</span></span><br><span class="line"><span class="selector-class">.p1</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#bfa</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123;useState&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> styles <span class="keyword">from</span> <span class="string">&#x27;./App.module.css&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">p</span> <span class="attr">className</span>=<span class="string">&#123;</span>`$&#123;<span class="attr">styles.p1</span>&#125;`&#125;&gt;</span>我是一个段落<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h3 id="10-Fragment"><a href="#10-Fragment" class="headerlink" title="10 Fragment"></a>10 Fragment</h3><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">*   React.Fragment</span></span><br><span class="line"><span class="comment">*       - 是一个专门用来作为父容器的组件</span></span><br><span class="line"><span class="comment">*           它只会将它里边的子元素直接返回，不会创建任何多余的元素</span></span><br><span class="line"><span class="comment">*       - 当我们希望有一个父容器</span></span><br><span class="line"><span class="comment">*           但同时又不希望父容器在网页中产生多余的结构时</span></span><br><span class="line"><span class="comment">*           就可以使用Fragment</span></span><br><span class="line"><span class="comment">* */</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;&gt;</span></span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;<span class="name">div</span>&gt;</span>第一个组件<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;<span class="name">div</span>&gt;</span>第二个组件<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;<span class="name">div</span>&gt;</span>第三个组件<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h3 id="11-context"><a href="#11-context" class="headerlink" title="11 context"></a>11 context</h3><p>Context相当于一个公共的存储空间，我们可以将多个组件中都需要访问的数据统一存储到一个Context中，这样无需通过props逐层传递，即可使组件访问到这些数据。通过React.createContext()创建context</p>
<p>一般存放在store目录下</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">store</span><br><span class="line"> - xxxContext.js</span><br></pre></td></tr></table></figure>
<h4 id="1-定义context"><a href="#1-定义context" class="headerlink" title="1.定义context"></a>1.定义context</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">CartContext</span> = <span class="title class_">React</span>.<span class="title function_">createContext</span>(&#123;</span><br><span class="line">    <span class="attr">items</span>: [],</span><br><span class="line">    <span class="attr">totalAmount</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">totalPrice</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">addItem</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">removeItem</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">CartContext</span>;</span><br></pre></td></tr></table></figure>
<h4 id="2-数据提供者"><a href="#2-数据提供者" class="headerlink" title="2.数据提供者"></a>2.数据提供者</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123;useState&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">CartContext</span> <span class="keyword">from</span> <span class="string">&quot;./store/cart-context&quot;</span>;</span><br><span class="line"></span><br><span class="line">/ *   <span class="title class_">Xxx</span>.<span class="property">Provider</span></span><br><span class="line">*       - 表示数据的生产者，可以使用它来指定<span class="title class_">Context</span>中的数据</span><br><span class="line">*       - 通过value来指定<span class="title class_">Context</span>中存储的数据，</span><br><span class="line">*           这样一来，在该组件的所有的子组件中都可以通过<span class="title class_">Context</span>来访问它所指定数据</span><br><span class="line">*</span><br><span class="line">*   当我们通过<span class="title class_">Context</span>访问数据时，他会读取离他最近的<span class="title class_">Provider</span>中的数据，</span><br><span class="line">*       如果没有<span class="title class_">Provider</span>，则读取<span class="title class_">Context</span>中的默认数据</span><br><span class="line">*/</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> [cartData, setCartData] = <span class="title function_">useState</span>(&#123;</span><br><span class="line">        <span class="attr">items</span>: [],</span><br><span class="line">        <span class="attr">totalAmount</span>: <span class="number">0</span>,</span><br><span class="line">        <span class="attr">totalPrice</span>: <span class="number">0</span></span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">addItem</span> = (<span class="params"></span>) =&gt; &#123;&#125;</span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">removeItem</span> = (<span class="params"></span>) =&gt; &#123;&#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">CartContext.Provider</span> <span class="attr">value</span>=<span class="string">&#123;&#123;...cartData,</span> <span class="attr">addItem</span>, <span class="attr">removeItem</span>&#125;&#125;&gt;</span></span></span><br><span class="line"><span class="language-xml">            ...</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">CartContext.Provider</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="3-使用方式一（不推荐）："><a href="#3-使用方式一（不推荐）：" class="headerlink" title="3.使用方式一（不推荐）："></a>3.使用方式一（不推荐）：</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">CartContext</span> <span class="keyword">from</span> <span class="string">&quot;../store/CartContext&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">*   使用方式一：</span></span><br><span class="line"><span class="comment">*       1.引入context</span></span><br><span class="line"><span class="comment">*       2.使用 Xxx.Consumer 组件来创建元素</span></span><br><span class="line"><span class="comment">*           Consumer 的标签体需要一个回调函数</span></span><br><span class="line"><span class="comment">*           它会将context设置为回调函数的参数，通过参数就可以访问到context中存储的数据</span></span><br><span class="line"><span class="comment">*</span></span><br><span class="line"><span class="comment">* */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">A</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">CartContext.Consumer</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;(ctx)=&gt;&#123;</span></span><br><span class="line"><span class="language-xml">               return <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                   &#123;ctx.name&#125; - &#123;ctx.age&#125;</span></span><br><span class="line"><span class="language-xml">               <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#125;&#125;</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">CartContext.Consumer</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> A;</span><br></pre></td></tr></table></figure>
<h4 id="4-使用方式二（推荐）："><a href="#4-使用方式二（推荐）：" class="headerlink" title="4.使用方式二（推荐）："></a>4.使用方式二（推荐）：</h4><ul>
<li><p>1.导入Context</p>
</li>
<li><p>2.使用钩子函数useContext()获取到context</p>
<p>  useContext() 需要一个Context作为参数，它会将Context中数据获取并作为返回值返回</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">Counter</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 获取cartContext</span></span><br><span class="line">    <span class="keyword">const</span> ctx = <span class="title function_">useContext</span>(<span class="title class_">CartContext</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">handleClick</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        ctx.<span class="title function_">addItem</span>()</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">className</span>=<span class="string">&#123;classes.Add&#125;</span> <span class="attr">onClick</span>=<span class="string">&#123;handleClick&#125;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            点我一下</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="12-useEffect"><a href="#12-useEffect" class="headerlink" title="12 useEffect()"></a>12 useEffect()</h3><h4 id="1-简单介绍"><a href="#1-简单介绍" class="headerlink" title="1.简单介绍"></a>1.简单介绍</h4><blockquote>
<p>useEffect()是一个钩子函数，需要一个函数作为参数，这个作为参数的函数，将会在组件渲染完毕后执行</p>
<p>在开发中，可以将那些会产生副作用的代码编写到useEffect的回调函数中，可以避免这些代码影响到组件的渲染</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> [count, setCount] = <span class="title function_">useState</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 将会在组件渲染完毕后执行</span></span><br><span class="line">    <span class="title function_">useEffect</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="title function_">setCount</span>(<span class="number">1</span>);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">clickHandler</span> = (<span class="params"></span>)=&gt;&#123;</span><br><span class="line">      <span class="title function_">setCount</span>(<span class="number">1</span>);</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;clickHandler&#125;</span>&gt;</span>点我一下<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h4 id="2-依赖项"><a href="#2-依赖项" class="headerlink" title="2.依赖项"></a>2.依赖项</h4><blockquote>
<p>默认情况下，useEffect()中的函数，会在组件渲染完成后调用，并且是每次渲染完成后都会调用</p>
<p>在useEffect()可以传递一个第二个参数，参数是一个数组，在数组中可以指定Effect的依赖项</p>
<p>指定后，只有当依赖发生变化时，Effect才会被触发， 通常会将Effect中使用的所有的局部变量都设置为依赖项</p>
<p>像setState()是由钩子函数useState()生成的，useState()会确保组件的每次渲染都会获取到相同setState()对象，所以setState()方法可以不设置到依赖中</p>
<p><code>注意：如果依赖项设置了一个空数组，则意味Effect只会在组件初始化时触发一次，不设置则每次重新渲染都执行</code></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">Cart</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> ctx = <span class="title function_">useContext</span>(<span class="title class_">CartContext</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 如果ctx发生变化会触发useEffect重新执行（watch??）</span></span><br><span class="line">    <span class="title function_">useEffect</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(ctx.<span class="property">totalAmount</span> === <span class="number">0</span>)&#123;</span><br><span class="line">            <span class="comment">// 购物车已经被清空</span></span><br><span class="line">            <span class="title function_">setShowDetails</span>(<span class="literal">false</span>);</span><br><span class="line">            <span class="title function_">setShowCheckout</span>(<span class="literal">false</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,[ctx]);</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;ctx.totalAmount&#125;</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="3-清理函数"><a href="#3-清理函数" class="headerlink" title="3.清理函数"></a>3.清理函数</h4><blockquote>
<p>在Effect的回调函数中，可以指定一个函数作为返回值</p>
<p>这个函数可以称其为清理函数，它会在下次Effect执行前调用</p>
<p>可以在这个函数中，做一些工作来清除上次Effect执行所带来的的影响</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">FilterMeals</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> [keyword, setKeyword] = <span class="title function_">useState</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 通过Effect来改造练习</span></span><br><span class="line">    <span class="title function_">useEffect</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 降低数据过滤的次数，提高用户体验</span></span><br><span class="line">        <span class="comment">// 用户输入完了你在过滤，用户输入的过程中，不要过滤</span></span><br><span class="line">        <span class="comment">// 当用户停止输入动作1秒后，我们才做查询</span></span><br><span class="line">        <span class="comment">// 在开启一个定时器的同时，应该关掉上一次</span></span><br><span class="line">        <span class="keyword">const</span> timer = <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Effect触发了！&#x27;</span>);</span><br><span class="line">            props.<span class="title function_">onFilter</span>(keyword);</span><br><span class="line">        &#125;, <span class="number">1000</span>);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 在Effect的回调函数中，可以指定一个函数作为返回值</span></span><br><span class="line">        <span class="comment">// 这个函数可以称其为清理函数，它会在下次Effect执行前调用</span></span><br><span class="line">        <span class="comment">// 可以在这个函数中，做一些工作来清除上次Effect执行所带来的的影响</span></span><br><span class="line">        <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="built_in">clearTimeout</span>(timer);</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">    &#125;, [keyword]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">inputChangeHandler</span> = e =&gt; &#123;</span><br><span class="line">        <span class="title function_">setKeyword</span>(e.<span class="property">target</span>.<span class="property">value</span>.<span class="title function_">trim</span>()) ;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&#123;classes.FilterMeals&#125;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&#123;classes.InputOuter&#125;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">input</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">                    <span class="attr">value</span>=<span class="string">&#123;keyword&#125;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">                    <span class="attr">onChange</span>=<span class="string">&#123;inputChangeHandler&#125;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">                    <span class="attr">className</span>=<span class="string">&#123;classes.SearchInput&#125;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">                    <span class="attr">type</span>=<span class="string">&quot;text&quot;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">                    <span class="attr">placeholder</span>=<span class="string">&#123;</span>&quot;<span class="attr">请输入关键字</span>&quot;&#125;/&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">FilterMeals</span>;</span><br></pre></td></tr></table></figure>
<h3 id="13-useReducer"><a href="#13-useReducer" class="headerlink" title="13 useReducer()"></a>13 useReducer()</h3><blockquote>
<p>维护一个对象属性过多时使用最佳，以下仅示例</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; useReducer &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">*   useReducer(reducer, initialArg, init)</span></span><br><span class="line"><span class="comment">*   参数：</span></span><br><span class="line"><span class="comment">*       reducer : 整合函数</span></span><br><span class="line"><span class="comment">*           对于我们当前state的所有操作都应该在该函数中定义</span></span><br><span class="line"><span class="comment">*           该函数的返回值，会成为state的新值</span></span><br><span class="line"><span class="comment">*           reducer在执行时，会收到两个参数：</span></span><br><span class="line"><span class="comment">*               state 当前最新的state</span></span><br><span class="line"><span class="comment">*               action 它需要一个对象</span></span><br><span class="line"><span class="comment">*                       在对象中会存储dispatch所发送的指令</span></span><br><span class="line"><span class="comment">*       initialArg : state的初始值，作用和useState()中的值是一样</span></span><br><span class="line"><span class="comment">*   返回值：</span></span><br><span class="line"><span class="comment">*       数组：</span></span><br><span class="line"><span class="comment">*           第一个参数，state 用来获取state的值</span></span><br><span class="line"><span class="comment">*           第二个参数，state 修改的派发器</span></span><br><span class="line"><span class="comment">*                   通过派发器可以发送操作state的命令</span></span><br><span class="line"><span class="comment">*                   具体的修改行为将会由另外一个函数(reducer)执行</span></span><br><span class="line"><span class="comment">*</span></span><br><span class="line"><span class="comment">* */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 为了避免reducer会重复创建，通常reducer会定义到组件的外部</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">countReducer</span> = (<span class="params">state, action</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">switch</span> (action.<span class="property">type</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;ADD&#x27;</span>:</span><br><span class="line">            <span class="keyword">return</span> state + <span class="number">1</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;SUB&#x27;</span>:</span><br><span class="line">            <span class="keyword">return</span> state - <span class="number">1</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            <span class="keyword">return</span> state;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> [count, countDispatch] = <span class="title function_">useReducer</span>(countReducer, <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">addHandler</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        <span class="title function_">countDispatch</span>(&#123; <span class="attr">type</span>: <span class="string">&#x27;ADD&#x27;</span> &#125;);</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">subHandler</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        <span class="title function_">countDispatch</span>(&#123; <span class="attr">type</span>: <span class="string">&#x27;SUB&#x27;</span> &#125;);</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;subHandler&#125;</span>&gt;</span>减少<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;count&#125;</span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;addHandler&#125;</span>&gt;</span>增加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h3 id="14-React-memo"><a href="#14-React-memo" class="headerlink" title="14 React.memo()"></a>14 React.memo()</h3><blockquote>
<p>React.memo() 是一个高阶组件</p>
<p>*    它接收另一个组件作为参数，并且会返回一个包装过的新组件</p>
<p>*    包装过的新组件就会具有缓存功能，</p>
<p>*    包装过后，只有组件的<code>props</code>发生变化化</p>
<p>*    才会触发组件的重新的渲染，否则总是返回缓存中结果</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">B</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;B渲染&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>组件B<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;props.test &amp;&amp; &#x27;哈哈&#x27;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">React</span>.<span class="title function_">memo</span>(B);</span><br></pre></td></tr></table></figure>
<h3 id="15-useCallback"><a href="#15-useCallback" class="headerlink" title="15 useCallback()"></a>15 useCallback()</h3><blockquote>
<p>useCallback 是一个钩子函数，用来创建React中的回调</p>
<p>useCallback 创建的回调函数<code>不会总在组件重新渲染时重新创建</code></p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">*   useCallback()</span></span><br><span class="line"><span class="comment">*       参数：</span></span><br><span class="line"><span class="comment">*           1. 回调函数</span></span><br><span class="line"><span class="comment">*           2. 依赖数组</span></span><br><span class="line"><span class="comment">*               - 当依赖数组中的变量发生变化时，回调函数才会重新创建</span></span><br><span class="line"><span class="comment">*               - 如果不指定依赖数组，回调函数每次都会重新创建</span></span><br><span class="line"><span class="comment">*               - 一定要将回调函数中使用到的所有变量都设置到依赖数组中</span></span><br><span class="line"><span class="comment">*                   除了（setState）</span></span><br><span class="line"><span class="comment">* */</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> [count, setCount] = <span class="title function_">useState</span>(<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">const</span> [num, setNum] = <span class="title function_">useState</span>(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> clickHandler = <span class="title function_">useCallback</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">setCount</span>(<span class="function"><span class="params">prevState</span> =&gt;</span> prevState + num);</span><br><span class="line">        <span class="title function_">setNum</span>(<span class="function">() =&gt;</span> num + <span class="number">1</span>);</span><br><span class="line">    &#125;, [num]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>App -- &#123;count&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;clickHandler&#125;</span>&gt;</span>增加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">A</span> <span class="attr">onAdd</span>=<span class="string">&#123;clickHandler&#125;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h3 id="16-自定义hook"><a href="#16-自定义hook" class="headerlink" title="16 自定义hook"></a>16 自定义hook</h3><blockquote>
<p>React中的<code>钩子函数只能在函数组件或自定钩子中调用</code></p>
<p>当我们需要将React中钩子函数提取到一个公共区域时，就可以使用自定义钩子</p>
<p>自定义钩子其实就是一个普通函数，只是它的<code>名字需要使用use开头</code>，如下示例：</p>
</blockquote>
<p>定义一个useFetch() hook</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;useCallback, useState&#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> <span class="title function_">useFetch</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> [data, setData] = <span class="title function_">useState</span>([]);</span><br><span class="line">    <span class="comment">// 添加一个state来记录数据是否正在加载,false表示没有加载数据，true表示加载</span></span><br><span class="line">    <span class="keyword">const</span> [loading, setLoading] = <span class="title function_">useState</span>(<span class="literal">false</span>);</span><br><span class="line">    <span class="comment">// 创建一个state来记录错误信息</span></span><br><span class="line">    <span class="keyword">const</span> [error, setError] = <span class="title function_">useState</span>(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> fetchData = <span class="title function_">useCallback</span>(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">            <span class="title function_">setLoading</span>(<span class="literal">true</span>);</span><br><span class="line">            <span class="title function_">setError</span>(<span class="literal">null</span>);</span><br><span class="line">            <span class="keyword">const</span> res = <span class="keyword">await</span> <span class="title function_">fetch</span>(<span class="string">&#x27;http://localhost:1337/api/students&#x27;</span>);</span><br><span class="line">            <span class="comment">//判断请求是否加载成功</span></span><br><span class="line">            <span class="keyword">if</span> (res.<span class="property">ok</span>) &#123;</span><br><span class="line">                <span class="keyword">const</span> data = <span class="keyword">await</span> res.<span class="title function_">json</span>();</span><br><span class="line">                <span class="title function_">setData</span>(data.<span class="property">data</span>);</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;数据加载失败！&#x27;</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">            <span class="title function_">setError</span>(e);</span><br><span class="line">        &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">            <span class="title function_">setLoading</span>(<span class="literal">false</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;, []);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 设置返回值</span></span><br><span class="line">    <span class="keyword">return</span> &#123; loading, error, data, fetchData &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>使用示例：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123;useCallback, useEffect, useState&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">StudentList</span> <span class="keyword">from</span> <span class="string">&quot;./components/StudentList&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">StuContext</span> <span class="keyword">from</span> <span class="string">&quot;./store/StuContext&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> useFetch <span class="keyword">from</span> <span class="string">&quot;./hooks/useFetch&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;<span class="attr">data</span>:stuData, loading, error, fetchData&#125; = <span class="title function_">useFetch</span>(&#123;</span><br><span class="line">        <span class="attr">url</span>:<span class="string">&#x27;students&#x27;</span></span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="title function_">useEffect</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="title function_">fetchData</span>();</span><br><span class="line">    &#125;, []);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">loadDataHandler</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        <span class="title function_">fetchData</span>();</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">StuContext.Provider</span> <span class="attr">value</span>=<span class="string">&#123;&#123;fetchData&#125;&#125;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;loadDataHandler&#125;</span>&gt;</span>加载数据<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                &#123;(!loading &amp;&amp; !error) &amp;&amp; <span class="tag">&lt;<span class="name">StudentList</span> <span class="attr">stus</span>=<span class="string">&#123;stuData&#125;/</span>&gt;</span>&#125;</span></span><br><span class="line"><span class="language-xml">                &#123;loading &amp;&amp; <span class="tag">&lt;<span class="name">p</span>&gt;</span>数据正在加载中...<span class="tag">&lt;/<span class="name">p</span>&gt;</span>&#125;</span></span><br><span class="line"><span class="language-xml">                &#123;error &amp;&amp; <span class="tag">&lt;<span class="name">p</span>&gt;</span>数据加载异常！<span class="tag">&lt;/<span class="name">p</span>&gt;</span>&#125;</span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">StuContext.Provider</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h3 id="17-Redux"><a href="#17-Redux" class="headerlink" title="17 Redux"></a>17 Redux</h3><blockquote>
<p>网页中使用redux的步骤：</p>
<p>  1.引入redux核心包</p>
<p>  2.创建reducer整合函数</p>
<p>  3.通过reducer对象创建store</p>
<p>  4.对store中的state进行订阅</p>
<p>  5.通过dispatch派发state的操作指令</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;sub&quot;</span>&gt;</span>减少<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;countSpan&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;add&quot;</span>&gt;</span>增加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    </span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/redux@4.2.0/dist/redux.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> subBtn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;sub&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> addBtn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;add&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> countSpan = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;countSpan&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// state 表示当前state，可以根据这个state生成新的state</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// action 是一个js对象，它里边会保存操作的信息</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">reducer</span>(<span class="params">state, action</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">switch</span> (action.<span class="property">type</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">case</span> <span class="string">&#x27;ADD&#x27;</span>:</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span> state + <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">case</span> <span class="string">&#x27;SUB&#x27;</span>:</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span> state - <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">default</span>:</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span> state;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> store = <span class="title class_">Redux</span>.<span class="title function_">createStore</span>(reducer, <span class="number">1</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 订阅消息，改变自动执行</span></span></span><br><span class="line"><span class="language-javascript">    store.<span class="title function_">subscribe</span>(<span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        countSpan.<span class="property">innerText</span> = store.<span class="title function_">getState</span>();</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 使用dispatch来派发消息</span></span></span><br><span class="line"><span class="language-javascript">    subBtn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        store.<span class="title function_">dispatch</span>(&#123;<span class="attr">type</span>: <span class="string">&#x27;SUB&#x27;</span>&#125;);</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    addBtn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        store.<span class="title function_">dispatch</span>(&#123;<span class="attr">type</span>: <span class="string">&#x27;ADD&#x27;</span>&#125;);</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="18-RTK"><a href="#18-RTK" class="headerlink" title="18 RTK"></a>18 RTK</h3><p>安装依赖</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install react-redux @reduxjs/toolkit -S</span><br><span class="line">或者</span><br><span class="line">yarn add react-redux @reduxjs/toolkit</span><br></pre></td></tr></table></figure>
<h4 id="1-创建store"><a href="#1-创建store" class="headerlink" title="1 创建store"></a>1 创建store</h4><blockquote>
<ol>
<li>使用createSlice创建切片</li>
<li>使用storeconfigure创建Store</li>
<li>导出actions和store</li>
</ol>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用RTK来构建store</span></span><br><span class="line"><span class="keyword">import</span> &#123;configureStore, createSlice&#125; <span class="keyword">from</span> <span class="string">&quot;@reduxjs/toolkit&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// createSlice 创建reducer的切片</span></span><br><span class="line"><span class="comment">// 它需要一个配置对象作为参数，通过对象的不同的属性来指定它的配置</span></span><br><span class="line"><span class="keyword">const</span> stuSlice = <span class="title function_">createSlice</span>(&#123;</span><br><span class="line">    <span class="comment">// 用来自动生成action中的type</span></span><br><span class="line">    <span class="attr">name</span>:<span class="string">&#x27;stu&#x27;</span>,</span><br><span class="line">    </span><br><span class="line">     <span class="comment">// state的初始值</span></span><br><span class="line">    <span class="attr">initialState</span>:&#123;</span><br><span class="line">        <span class="attr">name</span>:<span class="string">&#x27;孙悟空&#x27;</span>,</span><br><span class="line">        <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">        <span class="attr">gender</span>:<span class="string">&#x27;男&#x27;</span>,</span><br><span class="line">        <span class="attr">address</span>:<span class="string">&#x27;花果山&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 指定state的各种操作，直接在对象中添加方法</span></span><br><span class="line">    <span class="attr">reducers</span>:&#123;</span><br><span class="line">        <span class="comment">// 可以通过不同的方法来指定对state的不同操作</span></span><br><span class="line">        <span class="comment">// 两个参数：state 这个state的是一个代理对象，可以直接修改</span></span><br><span class="line">        <span class="title function_">setName</span>(<span class="params">state, action</span>)&#123;</span><br><span class="line">            state.<span class="property">name</span> = action.<span class="property">payload</span>;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="title function_">setAge</span>(<span class="params">state, action</span>)&#123;</span><br><span class="line">            state.<span class="property">age</span> = action.<span class="property">payload</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 切片对象会自动的帮助我们生成action</span></span><br><span class="line"><span class="comment">// actions中存储的是slice自动生成action创建器（函数），调用函数后会自动创建action对象</span></span><br><span class="line"><span class="comment">// action对象的结构 &#123;type:name/函数名, payload:函数的参数&#125;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> &#123;setName, setAge&#125; = stuSlice.<span class="property">actions</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建store 用来创建store对象，需要一个配置对象作为参数</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="title function_">configureStore</span>(&#123;</span><br><span class="line">   <span class="attr">reducer</span>:&#123;</span><br><span class="line">       <span class="attr">student</span>:stuSlice.<span class="property">reducer</span></span><br><span class="line">   &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store;</span><br></pre></td></tr></table></figure>
<h4 id="2-注册store"><a href="#2-注册store" class="headerlink" title="2 注册store"></a>2 注册store</h4><blockquote>
<p>使用Provider注册store</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">ReactDOM</span> <span class="keyword">from</span> <span class="string">&quot;react-dom/client&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&quot;./App&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">Provider</span>&#125; <span class="keyword">from</span> <span class="string">&quot;react-redux&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> root = <span class="title class_">ReactDOM</span>.<span class="title function_">createRoot</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;root&#x27;</span>));</span><br><span class="line">root.<span class="title function_">render</span>(</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">Provider</span> <span class="attr">store</span>=<span class="string">&#123;store&#125;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">App</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">Provider</span>&gt;</span></span></span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<h4 id="3-使用store"><a href="#3-使用store" class="headerlink" title="3 使用store"></a>3 使用store</h4><blockquote>
<p>useSelector() 用来加载state中的数据</p>
<p>useDispatch()来获取派发器对象</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;useDispatch, useSelector&#125; <span class="keyword">from</span> <span class="string">&quot;react-redux&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;setName, setAge&#125; <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// useSelector() 用来加载state中的数据</span></span><br><span class="line">    <span class="keyword">const</span> student = <span class="title function_">useSelector</span>(<span class="function"><span class="params">state</span> =&gt;</span> state.<span class="property">student</span>);</span><br><span class="line">    <span class="comment">// 通过useDispatch()来获取派发器对象</span></span><br><span class="line">    <span class="keyword">const</span> dispatch = <span class="title function_">useDispatch</span>();</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">setNameHandler</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        <span class="title function_">dispatch</span>(<span class="title function_">setName</span>(<span class="string">&#x27;沙和尚&#x27;</span>));</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">setAgeHandler</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        <span class="title function_">dispatch</span>(<span class="title function_">setAge</span>(<span class="number">33</span>));</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                &#123;student.name&#125; ---</span></span><br><span class="line"><span class="language-xml">                &#123;student.age&#125; ---</span></span><br><span class="line"><span class="language-xml">                &#123;student.gender&#125; ---</span></span><br><span class="line"><span class="language-xml">                &#123;student.address&#125;</span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;setNameHandler&#125;</span>&gt;</span>修改name<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;setAgeHandler&#125;</span>&gt;</span>修改age<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h3 id="19-RTK-Query"><a href="#19-RTK-Query" class="headerlink" title="19 RTK Query"></a>19 RTK Query</h3><p>参考链接：<a target="_blank" rel="noopener" href="https://www.lilichao.com/index.php/2022/05/27/rtk-query/">https://www.lilichao.com/index.php/2022/05/27/rtk-query/</a></p>
<h3 id="20-React-Router5"><a href="#20-React-Router5" class="headerlink" title="20 React Router5"></a>20 React Router5</h3><p>安装依赖</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install react-router-dom@5 -S</span><br></pre></td></tr></table></figure>
<h4 id="1-使用步骤"><a href="#1-使用步骤" class="headerlink" title="1.使用步骤"></a>1.使用步骤</h4><blockquote>
<ol>
<li>引入react-router-dom包</li>
<li>在index.js中引入BrowserRouter组件</li>
<li>将BrowserRouter设置为根组件</li>
</ol>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ReactDOM</span> <span class="keyword">from</span> <span class="string">&#x27;react-dom/client&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">BrowserRouter</span> <span class="keyword">as</span> <span class="title class_">Router</span>&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> root = <span class="title class_">ReactDOM</span>.<span class="title function_">createRoot</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;root&#x27;</span>));</span><br><span class="line">root.<span class="title function_">render</span>(</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">Router</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">App</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">Router</span>&gt;</span></span></span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">Route</span>&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&quot;./components/Home&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">About</span> <span class="keyword">from</span> <span class="string">&quot;./components/About&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">App</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;App&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      App组件</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">        &#123;/*</span></span><br><span class="line"><span class="language-xml">           使用Route来映射地址和组件</span></span><br><span class="line"><span class="language-xml">                属性：</span></span><br><span class="line"><span class="language-xml">                    path 映射的url地址</span></span><br><span class="line"><span class="language-xml">                    component 要挂载的组件</span></span><br><span class="line"><span class="language-xml">                    exact 路径是否完整匹配，默认值false</span></span><br><span class="line"><span class="language-xml">            当Route的路径被访问，其对应组件就会自动挂载</span></span><br><span class="line"><span class="language-xml">            注意 默认情况下Route并不是严格匹配</span></span><br><span class="line"><span class="language-xml">            只要url地址的头部和path一致，组件就会挂载，不会检查子路径</span></span><br><span class="line"><span class="language-xml">        */&#125;</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">Route</span> <span class="attr">exact</span> <span class="attr">path</span>=<span class="string">&quot;/&quot;</span> <span class="attr">component</span>=<span class="string">&#123;Home&#125;/</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">Route</span> <span class="attr">exact</span> <span class="attr">path</span>=<span class="string">&quot;/about&quot;</span> <span class="attr">component</span>=<span class="string">&#123;About&#125;/</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h4 id="2-Link-NavLink"><a href="#2-Link-NavLink" class="headerlink" title="2.Link/NavLink"></a>2.Link/NavLink</h4><blockquote>
<p>使用Link组件来创建超链接</p>
<p>NavLink和Link作用相似，只是可以指定链接激活后的样式</p>
<p>在使用react router时，<code>一定不要使用a标签来创建超链接</code>，因为a标签创建的超链接，会自动向服务器发送请求重新加载页面，而我们不希望这种情况发生</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">Link</span>, <span class="title class_">NavLink</span>&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span>主页<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">NavLinkexact</span> <span class="attr">activeClassName</span>=<span class="string">&#123;classes.active&#125;</span> <span class="attr">activeStyle</span>=<span class="string">&#123;&#123;textDecoration:</span>&quot;<span class="attr">underline</span>&quot;&#125;&#125; <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    主页</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">NavLink</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h4 id="3-路由跳转"><a href="#3-路由跳转" class="headerlink" title="3.路由跳转"></a>3.路由跳转</h4><blockquote>
<p>方法都在props.history里</p>
<p>或者使用const history = useHistory()获取</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">About</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">clickHandler</span> = (<span class="params"></span>)=&gt;&#123;</span><br><span class="line">        <span class="comment">// push()需要一个location作为参数</span></span><br><span class="line">        props.<span class="property">history</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line">            <span class="attr">pathname</span>:<span class="string">&#x27;/student/2&#x27;</span></span><br><span class="line">        &#125;);</span><br><span class="line"></span><br><span class="line">        props.<span class="property">history</span>.<span class="title function_">replace</span>(&#123;</span><br><span class="line">            <span class="attr">pathname</span>:<span class="string">&#x27;/student/2&#x27;</span>,</span><br><span class="line">            <span class="attr">state</span>:&#123;<span class="attr">name</span>:<span class="string">&#x27;哈哈&#x27;</span>&#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            .......</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h4 id="4-路由模式"><a href="#4-路由模式" class="headerlink" title="4.路由模式"></a>4.路由模式</h4><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ReactDOM</span> <span class="keyword">from</span> <span class="string">&#x27;react-dom/client&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">BrowserRouter</span> <span class="keyword">as</span> <span class="title class_">Router</span>&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">*  HashRouter 会通过url地址中的hash值来对地址进行匹配</span></span><br><span class="line"><span class="comment">*  BrowserRouter 直接通过url地址进行组件的跳转</span></span><br><span class="line"><span class="comment">*       使用过程中和普通的url地址没有区别</span></span><br><span class="line"><span class="comment">*</span></span><br><span class="line"><span class="comment">* react router 可以将url地址和组件进行映射</span></span><br><span class="line"><span class="comment">*      当用户访问某个地址时，与其对应的组件会自动的挂载</span></span><br><span class="line"><span class="comment">*       当我们通过点击Link构建的链接进行跳转时，跳转并没有经过服务器，所以没有问题</span></span><br><span class="line"><span class="comment">*       但是当我们刷新页面，或通过普通链接进行跳转时，会向服务器发送请加载数据</span></span><br><span class="line"><span class="comment">*           这时的请求并没有经过react router 所以会返回404</span></span><br><span class="line"><span class="comment">*</span></span><br><span class="line"><span class="comment">* 解决方案：</span></span><br><span class="line"><span class="comment">*   1.使用HashRouter，服务器不会去判断hash值，</span></span><br><span class="line"><span class="comment">*       所以使用HashRouter后请求将会由React Router处理</span></span><br><span class="line"><span class="comment">*   2.修改服务器的配置，将所有请求都转发到index.html</span></span><br><span class="line"><span class="comment">*       location / &#123;</span></span><br><span class="line"><span class="comment">            root   html;</span></span><br><span class="line"><span class="comment">            #index  index.html index.htm;</span></span><br><span class="line"><span class="comment">			try_files $uri /index.html;</span></span><br><span class="line"><span class="comment">        &#125;</span></span><br><span class="line"><span class="comment">*</span></span><br><span class="line"><span class="comment">* */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> root = <span class="title class_">ReactDOM</span>.<span class="title function_">createRoot</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;root&#x27;</span>));</span><br><span class="line">root.<span class="title function_">render</span>(</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">Router</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">App</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">Router</span>&gt;</span></span></span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<h4 id="5-Route"><a href="#5-Route" class="headerlink" title="5.Route"></a>5.Route</h4><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">Route</span>&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&quot;./components/Home&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">About</span> <span class="keyword">from</span> <span class="string">&quot;./components/About&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Menu</span> <span class="keyword">from</span> <span class="string">&quot;./components/Menu&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">App</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;App&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Menu</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">            &#123;/*</span></span><br><span class="line"><span class="language-xml">                component用来指定路由匹配后被挂载的组件</span></span><br><span class="line"><span class="language-xml">                    component需要直接传递组件的类</span></span><br><span class="line"><span class="language-xml">                    通过component构建的组件，它会自动创建组件并且会自动传递参数</span></span><br><span class="line"><span class="language-xml">                        match -- 匹配的信息</span></span><br><span class="line"><span class="language-xml">                            isExact 检查路径是否完全匹配</span></span><br><span class="line"><span class="language-xml">                            params 请求的参数</span></span><br><span class="line"><span class="language-xml">                        location -- 地址信息</span></span><br><span class="line"><span class="language-xml">                        history -- 控制页面的跳转</span></span><br><span class="line"><span class="language-xml">                            push() 跳转页面</span></span><br><span class="line"><span class="language-xml">                            replace() 替换页面</span></span><br><span class="line"><span class="language-xml">            */&#125;</span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Route</span> <span class="attr">exact</span> <span class="attr">path</span>=<span class="string">&quot;/&quot;</span> <span class="attr">component</span>=<span class="string">&#123;Home&#125;/</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/about&quot;</span> <span class="attr">component</span>=<span class="string">&#123;About&#125;/</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;/*</span></span><br><span class="line"><span class="language-xml">                /student/:id 会匹配到 /student/xxx</span></span><br><span class="line"><span class="language-xml">            */&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*<span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/student/:id&quot;</span> <span class="attr">component</span>=<span class="string">&#123;Student&#125;/</span>&gt;</span>*/&#125;</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">            &#123;/*</span></span><br><span class="line"><span class="language-xml">                render 也可以用了指定要挂载的组件</span></span><br><span class="line"><span class="language-xml">                    render需要一个回调函数作为参数，回调函数的返回值会最终被挂载</span></span><br><span class="line"><span class="language-xml">                    render不会自动传递三个属性</span></span><br><span class="line"><span class="language-xml">            */&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*<span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/student/:id&quot;</span> <span class="attr">render</span>=<span class="string">&#123;(routePros)</span>=&gt;</span>&#123;*/&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*    return <span class="tag">&lt;<span class="name">Student</span> &#123;<span class="attr">...routePros</span>&#125;/&gt;</span>*/&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*&#125;&#125;/&gt;*/&#125;</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">            &#123;/*</span></span><br><span class="line"><span class="language-xml">                children 也可以用来指定被挂载的组件</span></span><br><span class="line"><span class="language-xml">                    用法有两种：</span></span><br><span class="line"><span class="language-xml">                        1. 和render类似，传递回调函数</span></span><br><span class="line"><span class="language-xml">                            - 当children设置一个回调函数时，该组件无论路径是否匹配都会挂载</span></span><br><span class="line"><span class="language-xml">                        2. 可以传递组件</span></span><br><span class="line"><span class="language-xml">            */&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*<span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/student/:id&quot;</span> <span class="attr">children</span>=<span class="string">&#123;(routeProps)</span>=&gt;</span> <span class="tag">&lt;<span class="name">Student</span> &#123;<span class="attr">...routeProps</span>&#125;/&gt;</span>&#125;/&gt;*/&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*<span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/student/:id&quot;</span> <span class="attr">children</span>=<span class="string">&#123;</span>&lt;<span class="attr">Student</span>/&gt;</span>&#125;/&gt;*/&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*<span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/student/:id&quot;</span>&gt;</span>*/&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*    <span class="tag">&lt;<span class="name">Student</span>/&gt;</span>*/&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*<span class="tag">&lt;/<span class="name">Route</span>&gt;</span>*/&#125;</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">            &#123;/*<span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/student/:id&quot;</span>&gt;</span>*/&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*    &#123;routeProps =&gt; <span class="tag">&lt;<span class="name">Student</span> &#123;<span class="attr">...routeProps</span>&#125;/&gt;</span>&#125;*/&#125;</span></span><br><span class="line"><span class="language-xml">            &#123;/*<span class="tag">&lt;/<span class="name">Route</span>&gt;</span>*/&#125;</span></span><br><span class="line"><span class="language-xml">            </span></span><br><span class="line"><span class="language-xml">           	&#123;/* 表示匹配所有路由 */&#125;</span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;*&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">div</span>&gt;</span>路径错误<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h4 id="6-嵌套路由"><a href="#6-嵌套路由" class="headerlink" title="6.嵌套路由"></a>6.嵌套路由</h4><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// index.js</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Route</span> &#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">About</span> <span class="keyword">from</span> <span class="string">&quot;./components/About&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">App</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;App&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/about&quot;</span> <span class="attr">component</span>=<span class="string">&#123;About&#125;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// About.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Hello</span> <span class="keyword">from</span> <span class="string">&quot;./Hello&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Route</span>, useRouteMatch &#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">About</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; path &#125; = <span class="title function_">useRouteMatch</span>();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>About组件<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&#123;</span>`$&#123;<span class="attr">path</span>&#125;/<span class="attr">hello</span>`&#125;&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Hello</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">About</span>;</span><br></pre></td></tr></table></figure>
<h4 id="7-三个钩子"><a href="#7-三个钩子" class="headerlink" title="7.三个钩子"></a>7.三个钩子</h4><blockquote>
<p>const match = useRouteMatch();<br>const location = useLocation();<br>const history = useHistory();</p>
<p>注意：同样可以在props里面获取到这三个对象</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;useHistory, useLocation, useParams, useRouteMatch&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Student</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">    </span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(porps)</span><br><span class="line">    </span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">    *   除了可以通过props获取三个对象外，也可以通过钩子函数来获取</span></span><br><span class="line"><span class="comment">    * */</span></span><br><span class="line">    <span class="keyword">const</span> match = <span class="title function_">useRouteMatch</span>();</span><br><span class="line">    <span class="keyword">const</span> location = <span class="title function_">useLocation</span>();</span><br><span class="line">    <span class="keyword">const</span> history = <span class="title function_">useHistory</span>();</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            Student</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Student</span>;</span><br></pre></td></tr></table></figure>
<h4 id="8-参数获取"><a href="#8-参数获取" class="headerlink" title="8.参数获取"></a>8.参数获取</h4><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取路径参数</span></span><br><span class="line">&lt;<span class="title class_">Route</span> path=<span class="string">&quot;/student/:id&quot;</span> component=&#123;<span class="title class_">Student</span>&#125;/&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Student</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(props.<span class="property">match</span>.<span class="property">params</span>.<span class="property">id</span>);</span><br><span class="line">    <span class="keyword">const</span> &#123;id&#125; = <span class="title function_">useParams</span>();</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;id&#125;</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取查询参数 ===》 /student?id=111</span></span><br><span class="line">&lt;<span class="title class_">Route</span> path=<span class="string">&quot;/student&quot;</span> component=&#123;<span class="title class_">Student</span>&#125;/&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Student</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(props.<span class="property">location</span>.<span class="property">search</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">const</span> location = <span class="title function_">useLocation</span>();</span><br><span class="line">   	<span class="variable language_">console</span>.<span class="title function_">log</span>(location.<span class="property">search</span>)</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            Student</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h4 id="9-Switch"><a href="#9-Switch" class="headerlink" title="9.Switch"></a>9.Switch</h4><blockquote>
<p>可以将Route统一放到一个Switch中，<br>一个Switch中只会有一个路由显示</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">App</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;App&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Menu</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">            </span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Switch</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Route</span> <span class="attr">exact</span> <span class="attr">path</span>=<span class="string">&quot;/&quot;</span> <span class="attr">component</span>=<span class="string">&#123;Home&#125;/</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/about&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">About</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;*&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">div</span>&gt;</span>路径错误<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">Switch</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure>
<h4 id="10-Redirect"><a href="#10-Redirect" class="headerlink" title="10.Redirect"></a>10.Redirect</h4><blockquote>
<p>Redirect 用于跳转页面</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 写在App.js</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">App</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> [isLogin, setIsLogin] = <span class="title function_">useState</span>(<span class="literal">false</span>);</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;App&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Switch</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/form&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    &#123;</span></span><br><span class="line"><span class="language-xml">                        isLogin ? <span class="tag">&lt;<span class="name">MyForm</span>/&gt;</span> : <span class="tag">&lt;<span class="name">Redirect</span> <span class="attr">to</span>=<span class="string">&#123;</span>&quot;/<span class="attr">login</span>&quot;&#125;/&gt;</span></span></span><br><span class="line"><span class="language-xml">                    &#125;</span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;*&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">div</span>&gt;</span>路径错误<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">Switch</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可以写在组件中</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">About</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123;path&#125; = <span class="title function_">useRouteMatch</span>();</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Redirect</span> <span class="attr">to</span>=<span class="string">&#123;</span>&quot;/<span class="attr">form</span>&quot;&#125;/&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&#123;</span>`$&#123;<span class="attr">path</span>&#125;/<span class="attr">hello</span>`&#125;&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Hello</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="21-React-Router6"><a href="#21-React-Router6" class="headerlink" title="21 React Router6"></a>21 React Router6</h3><h4 id="1-简单使用"><a href="#1-简单使用" class="headerlink" title="1.简单使用"></a>1.简单使用</h4><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">Route</span>, <span class="title class_">Routes</span>&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&quot;./components/Home&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">About</span> <span class="keyword">from</span> <span class="string">&quot;./components/About&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h1</span>&gt;</span>App<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        &#123;/*</span></span><br><span class="line"><span class="language-xml">            Routes v6 中新增加的组件</span></span><br><span class="line"><span class="language-xml">                作用和Switch类似，都是用于Route的容器，默认就是严格匹配</span></span><br><span class="line"><span class="language-xml">                Routes中Route只有一个会被匹配，注意前面的 / 可以不写！</span></span><br><span class="line"><span class="language-xml">            v6中，Route的component render children都变了</span></span><br><span class="line"><span class="language-xml">                需要通过element来指定要挂载的组件</span></span><br><span class="line"><span class="language-xml">        */&#125;</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">Routes</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/&quot;</span> <span class="attr">element</span>=<span class="string">&#123;</span>&lt;<span class="attr">Home</span>/&gt;</span>&#125;&gt;<span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;about&quot;</span> <span class="attr">element</span>=<span class="string">&#123;</span>&lt;<span class="attr">About</span>/&gt;</span>&#125;&gt;<span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">Routes</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h4 id="2-参数和钩子"><a href="#2-参数和钩子" class="headerlink" title="2.参数和钩子"></a>2.参数和钩子</h4><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="title class_">Routes</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;student/:id&quot;</span> <span class="attr">element</span>=<span class="string">&#123;</span>&lt;<span class="attr">Student</span>/&gt;</span>&#125;/&gt;</span></span><br><span class="line">&lt;/<span class="title class_">Routes</span>&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;useLocation, useParams, useMatch, useNavigate&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Student</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 可以使用useParams()来获取参数</span></span><br><span class="line">    <span class="keyword">const</span> &#123;id&#125; = <span class="title function_">useParams</span>();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> location = <span class="title function_">useLocation</span>();<span class="comment">// 获取当前的地址信息</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 用来检查当前url是否匹配某个路由，不常用</span></span><br><span class="line">    <span class="comment">// 如果路径匹配，则返回一个对象，不匹配则返回null</span></span><br><span class="line">    <span class="comment">//const match = useMatch(&quot;/student/:id&quot;);</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// useNavigate获取一个用于条件页面的函数，用于路由跳转</span></span><br><span class="line">    <span class="keyword">const</span> nav = <span class="title function_">useNavigate</span>();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">clickHandler</span> = (<span class="params"></span>) =&gt;&#123;</span><br><span class="line">        <span class="comment">// nav(&#x27;/about&#x27;); // 使用push，会产生历史记录</span></span><br><span class="line">        <span class="title function_">nav</span>(<span class="string">&#x27;/about&#x27;</span>, &#123;<span class="attr">replace</span>: <span class="literal">true</span>&#125;); <span class="comment">// 使用replace 不会产生新的记录</span></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;clickHandler&#125;</span>&gt;</span>点我一下<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h4 id="3-嵌套路由"><a href="#3-嵌套路由" class="headerlink" title="3.嵌套路由"></a>3.嵌套路由</h4><blockquote>
<p>Outlet 用来表示嵌套路由中的组件，（<code>类似router-view</code>）</p>
<p>  当嵌套路由中的路径匹配成功了，Outlet则表示嵌套路由中的组件</p>
<p>  当嵌套路由中的路径没有匹配成功，Outlet就什么都不是</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h1</span>&gt;</span>App<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Routes</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;/&quot;</span> <span class="attr">element</span>=<span class="string">&#123;</span>&lt;<span class="attr">Home</span>/&gt;</span>&#125;&gt;<span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                &#123;/*  访问/about 不会出现 */&#125;</span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;about&quot;</span> <span class="attr">element</span>=<span class="string">&#123;</span>&lt;<span class="attr">About</span>/&gt;</span>&#125;&gt;</span></span><br><span class="line"><span class="language-xml">                    &#123;/*  访问 /about/hello 会出现 */&#125;</span></span><br><span class="line"><span class="language-xml">                    <span class="tag">&lt;<span class="name">Route</span> <span class="attr">path</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">element</span>=<span class="string">&#123;</span>&lt;<span class="attr">Hello</span>/&gt;</span>&#125;&gt;<span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;/<span class="name">Route</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">Routes</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// About组件</span></span><br><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">Outlet</span>&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">About</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;/*</span></span><br><span class="line"><span class="language-xml">                Outlet 用来表示嵌套路由中的组件</span></span><br><span class="line"><span class="language-xml">                    当嵌套路由中的路径匹配成功了，Outlet则表示嵌套路由中的组件</span></span><br><span class="line"><span class="language-xml">                    当嵌套路由中的路径没有匹配成功，Outlet就什么都不是</span></span><br><span class="line"><span class="language-xml">            */&#125;</span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Outlet</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h4 id="4-Navigate"><a href="#4-Navigate" class="headerlink" title="4.Navigate"></a>4.Navigate</h4><blockquote>
<p>Navigate 组件用来跳转到指定的位置，默认使用push跳转，默认就是push，返回的是当前页面，会循环</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">Outlet</span>, <span class="title class_">Navigate</span>&#125; <span class="keyword">from</span> <span class="string">&quot;react-router-dom&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">About</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;/*</span></span><br><span class="line"><span class="language-xml">            	匹配成功会立即跳转</span></span><br><span class="line"><span class="language-xml">                Navigate 组件用来跳转到指定的位置，默认使用push跳转</span></span><br><span class="line"><span class="language-xml">            */&#125;</span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Navigate</span> <span class="attr">to</span>=<span class="string">&quot;/student/1&quot;</span> <span class="attr">replace</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>关于我们，其实是四个人<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h4 id="5-NavLink"><a href="#5-NavLink" class="headerlink" title="5.NavLink"></a>5.NavLink</h4><blockquote>
<p>设置选中的路由链接的样式改变了</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">Menu</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">              <span class="tag">&lt;<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                  <span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span>主页<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">              <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">              <span class="tag">&lt;<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                  <span class="tag">&lt;<span class="name">Link</span> <span class="attr">to</span>=<span class="string">&quot;/about&quot;</span>&gt;</span>关于<span class="tag">&lt;/<span class="name">Link</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">              <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">              <span class="tag">&lt;<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                  <span class="tag">&lt;<span class="name">NavLink</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">                      <span class="attr">style</span>=<span class="string">&#123;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">                          (&#123;<span class="attr">isActive</span>&#125;)=&gt;</span>&#123;</span></span><br><span class="line"><span class="language-xml">                              return isActive?</span></span><br><span class="line"><span class="language-xml">                                  &#123;backgroundColor:&quot;yellow&quot;&#125;:</span></span><br><span class="line"><span class="language-xml">                                  null</span></span><br><span class="line"><span class="language-xml">                          &#125;</span></span><br><span class="line"><span class="language-xml">                      &#125;</span></span><br><span class="line"><span class="language-xml">                      to=&quot;/student/2&quot;&gt;学生<span class="tag">&lt;/<span class="name">NavLink</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">              <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="22-useMemo"><a href="#22-useMemo" class="headerlink" title="22 useMemo"></a>22 useMemo</h3><blockquote>
<p>缓存函数的执行结果或者组件</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模拟业务耗时3秒</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a, b</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> begin = <span class="title class_">Date</span>.<span class="title function_">now</span>();</span><br><span class="line">    <span class="keyword">while</span> (<span class="number">1</span>)&#123;</span><br><span class="line">        <span class="keyword">if</span>(<span class="title class_">Date</span>.<span class="title function_">now</span>() - begin &gt; <span class="number">3000</span>)&#123;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;函数执行了&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 缓存函数的执行结果</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> [count, setCount] = <span class="title function_">useState</span>(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> a = <span class="number">123</span>;</span><br><span class="line">    <span class="keyword">let</span> b = <span class="number">456</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(count % <span class="number">10</span> === <span class="number">0</span>)&#123;</span><br><span class="line">        a += count;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// sum()函数每次组件渲染时都会执行</span></span><br><span class="line">    <span class="comment">//useMemo 用来存储函数的执行结果</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="title function_">useMemo</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="title function_">sum</span>(a, b);</span><br><span class="line">    &#125;,[a, b]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> someEle = <span class="title function_">useMemo</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="language-xml"><span class="tag">&lt;<span class="name">Some</span> <span class="attr">a</span>=<span class="string">&#123;a&#125;</span> <span class="attr">b</span>=<span class="string">&#123;b&#125;/</span>&gt;</span></span>;</span><br><span class="line">    &#125;, [a, b]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h1</span>&gt;</span>App<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>result: &#123;result&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;count&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;()</span>=&gt;</span>setCount(prevState =&gt; prevState + 1)&#125;&gt;点我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 缓存组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Some</span> <span class="keyword">from</span> <span class="string">&quot;./components/Some&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">a, b</span>)&#123;</span><br><span class="line">    <span class="keyword">const</span> begin = <span class="title class_">Date</span>.<span class="title function_">now</span>();</span><br><span class="line">    <span class="keyword">while</span> (<span class="number">1</span>)&#123;</span><br><span class="line">        <span class="keyword">if</span>(<span class="title class_">Date</span>.<span class="title function_">now</span>() - begin &gt; <span class="number">3000</span>)&#123;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;函数执行了&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> [count, setCount] = <span class="title function_">useState</span>(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> a = <span class="number">123</span>;</span><br><span class="line">    <span class="keyword">let</span> b = <span class="number">456</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span>(count % <span class="number">10</span> === <span class="number">0</span>)&#123;</span><br><span class="line">        a += count;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> someEle = <span class="title function_">useMemo</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="language-xml"><span class="tag">&lt;<span class="name">Some</span> <span class="attr">a</span>=<span class="string">&#123;a&#125;</span> <span class="attr">b</span>=<span class="string">&#123;b&#125;/</span>&gt;</span></span>;</span><br><span class="line">    &#125;, [a, b]);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h1</span>&gt;</span>App<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;someEle&#125;</span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;count&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;()</span>=&gt;</span>setCount(prevState =&gt; prevState + 1)&#125;&gt;点我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="23-forwardRef-amp-useImperativeHandle"><a href="#23-forwardRef-amp-useImperativeHandle" class="headerlink" title="23 forwardRef &amp; useImperativeHandle"></a>23 forwardRef &amp; useImperativeHandle</h3><blockquote>
<p>React.forwardRef() 可以用来指定组件向外部暴露的ref，<code>有点像作用域插槽</code></p>
<p>useImperativeHandle 可以用来指定ref返回的值</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 子组件暴露</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Some</span> = <span class="title class_">React</span>.<span class="title function_">forwardRef</span>(<span class="function">(<span class="params">props, ref</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> inputRef = <span class="title function_">useRef</span>();</span><br><span class="line"></span><br><span class="line">    <span class="title function_">useImperativeHandle</span>(ref, <span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="comment">// 回调函数的返回值，会成为ref的值</span></span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="title function_">changeInpValue</span>(<span class="params">val</span>)&#123;</span><br><span class="line">                inputRef.<span class="property">current</span>.<span class="property">value</span> = val;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Some<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">ref</span>=<span class="string">&#123;inputRef&#125;</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 父组件获取</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">App</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> [count, setCount] = <span class="title function_">useState</span>(<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">const</span> someRef = <span class="title function_">useRef</span>();</span><br><span class="line"></span><br><span class="line">    <span class="comment">// someRef.current 为useImperativeHandle函数的返回值</span></span><br><span class="line">    <span class="title function_">useEffect</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(someRef);</span><br><span class="line">        someRef.<span class="property">current</span>.<span class="title function_">changeInpValue</span>(count);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h1</span>&gt;</span>App<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;count&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;()</span>=&gt;</span>setCount(prevState =&gt; prevState + 1)&#125;&gt;点我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Some</span> <span class="attr">ref</span>=<span class="string">&#123;someRef&#125;/</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h3 id="24-其他不常用钩子函数"><a href="#24-其他不常用钩子函数" class="headerlink" title="24 其他不常用钩子函数"></a>24 其他不常用钩子函数</h3><p>参考链接：<a target="_blank" rel="noopener" href="https://www.lilichao.com/index.php/2022/06/21/%e5%85%b3%e4%ba%8ehook/">https://www.lilichao.com/index.php/2022/06/21/%e5%85%b3%e4%ba%8ehook/</a></p>
<h3 id="100-使用FontAwesome"><a href="#100-使用FontAwesome" class="headerlink" title="100 使用FontAwesome"></a>100 使用FontAwesome</h3><h4 id="1-安装依赖"><a href="#1-安装依赖" class="headerlink" title="1.安装依赖"></a>1.安装依赖</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">npm i --save @fortawesome/fontawesome-svg-core</span><br><span class="line">npm i --save @fortawesome/free-solid-svg-icons</span><br><span class="line">npm i --save @fortawesome/free-regular-svg-icons</span><br><span class="line">npm i --save @fortawesome/react-fontawesome@latest</span><br></pre></td></tr></table></figure>
<h4 id="2-引入组件"><a href="#2-引入组件" class="headerlink" title="2.引入组件"></a>2.引入组件</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">FontAwesomeIcon</span>&#125; <span class="keyword">from</span> <span class="string">&quot;@fortawesome/react-fontawesome&quot;</span>;</span><br></pre></td></tr></table></figure>
<h4 id="3-引入图标"><a href="#3-引入图标" class="headerlink" title="3.引入图标"></a>3.引入图标</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;faPlus&#125; <span class="keyword">from</span> <span class="string">&quot;@fortawesome/free-solid-svg-icons&quot;</span>;</span><br></pre></td></tr></table></figure>
<h4 id="4-使用组件"><a href="#4-使用组件" class="headerlink" title="4.使用组件"></a>4.使用组件</h4><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="title class_">FontAwesomeIcon</span> icon=&#123;faPlus&#125;/&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;<span class="title class_">FontAwesomeIcon</span>&#125; <span class="keyword">from</span> <span class="string">&quot;@fortawesome/react-fontawesome&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;faPlus&#125; <span class="keyword">from</span> <span class="string">&quot;@fortawesome/free-solid-svg-icons&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Counter</span> = (<span class="params">props</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">className</span>=<span class="string">&#123;classes.Add&#125;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">FontAwesomeIcon</span> <span class="attr">icon</span>=<span class="string">&#123;faPlus&#125;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Counter</span>;</span><br></pre></td></tr></table></figure></article><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a><a class="post-meta__tags" href="/tags/React/">React</a></div><div class="post_share"></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/blog/web/Pinia/"><img class="prev-cover" src= "" data-lazy-src="/images/pinia.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Pinia 使用</div></div></a></div><div class="next-post pull-right"><a href="/blog/web/react%20%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD/"><img class="next-cover" src= "" data-lazy-src="/images/react.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">React 路由懒加载</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/blog/web/react 路由懒加载/" title="React 路由懒加载"><img class="cover" src= "" data-lazy-src="/images/react.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-04-21</div><div class="title">React 路由懒加载</div></div></a></div><div><a href="/blog/utils/input 检验函数 vue3/" title="input 检验函数"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">input 检验函数</div></div></a></div><div><a href="/blog/utils/vue3 指令/" title="Vue3 指令"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">Vue3 指令</div></div></a></div><div><a href="/blog/utils/小程序base64转为本地文件（图片）/" title="小程序base64转为本地文件"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">小程序base64转为本地文件</div></div></a></div><div><a href="/blog/utils/时间格式化/" title="时间格式化"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">时间格式化</div></div></a></div><div><a href="/blog/utils/颜色工具 color/" title="颜色工具"><img class="cover" src= "" data-lazy-src="/images/utils.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2024-01-18</div><div class="title">颜色工具</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">一切解释权归本咸鱼所有</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#01-%E4%B8%89%E4%B8%AAAPI"><span class="toc-number">1.</span> <span class="toc-text">01 三个API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#02-%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6"><span class="toc-number">2.</span> <span class="toc-text">02 函数组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#03-%E4%BA%8B%E4%BB%B6"><span class="toc-number">3.</span> <span class="toc-text">03 事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#04-%E4%BC%A0%E9%80%92%E5%B1%9E%E6%80%A7"><span class="toc-number">4.</span> <span class="toc-text">04 传递属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#05-useState"><span class="toc-number">5.</span> <span class="toc-text">05 useState()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#06-useRef"><span class="toc-number">6.</span> <span class="toc-text">06 useRef()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#07-%E8%A1%A8%E5%8D%95%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="toc-number">7.</span> <span class="toc-text">07 表单双向绑定</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#08-portal"><span class="toc-number">8.</span> <span class="toc-text">08 portal</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#09-css-%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">9.</span> <span class="toc-text">09 css 模块化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-Fragment"><span class="toc-number">10.</span> <span class="toc-text">10 Fragment</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11-context"><span class="toc-number">11.</span> <span class="toc-text">11 context</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%AE%9A%E4%B9%89context"><span class="toc-number">11.1.</span> <span class="toc-text">1.定义context</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%95%B0%E6%8D%AE%E6%8F%90%E4%BE%9B%E8%80%85"><span class="toc-number">11.2.</span> <span class="toc-text">2.数据提供者</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F%E4%B8%80%EF%BC%88%E4%B8%8D%E6%8E%A8%E8%8D%90%EF%BC%89%EF%BC%9A"><span class="toc-number">11.3.</span> <span class="toc-text">3.使用方式一（不推荐）：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F%E4%BA%8C%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89%EF%BC%9A"><span class="toc-number">11.4.</span> <span class="toc-text">4.使用方式二（推荐）：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-useEffect"><span class="toc-number">12.</span> <span class="toc-text">12 useEffect()</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D"><span class="toc-number">12.1.</span> <span class="toc-text">1.简单介绍</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E4%BE%9D%E8%B5%96%E9%A1%B9"><span class="toc-number">12.2.</span> <span class="toc-text">2.依赖项</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%B8%85%E7%90%86%E5%87%BD%E6%95%B0"><span class="toc-number">12.3.</span> <span class="toc-text">3.清理函数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-useReducer"><span class="toc-number">13.</span> <span class="toc-text">13 useReducer()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#14-React-memo"><span class="toc-number">14.</span> <span class="toc-text">14 React.memo()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#15-useCallback"><span class="toc-number">15.</span> <span class="toc-text">15 useCallback()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#16-%E8%87%AA%E5%AE%9A%E4%B9%89hook"><span class="toc-number">16.</span> <span class="toc-text">16 自定义hook</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#17-Redux"><span class="toc-number">17.</span> <span class="toc-text">17 Redux</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-RTK"><span class="toc-number">18.</span> <span class="toc-text">18 RTK</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%88%9B%E5%BB%BAstore"><span class="toc-number">18.1.</span> <span class="toc-text">1 创建store</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%B3%A8%E5%86%8Cstore"><span class="toc-number">18.2.</span> <span class="toc-text">2 注册store</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E4%BD%BF%E7%94%A8store"><span class="toc-number">18.3.</span> <span class="toc-text">3 使用store</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#19-RTK-Query"><span class="toc-number">19.</span> <span class="toc-text">19 RTK Query</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#20-React-Router5"><span class="toc-number">20.</span> <span class="toc-text">20 React Router5</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4"><span class="toc-number">20.1.</span> <span class="toc-text">1.使用步骤</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-Link-NavLink"><span class="toc-number">20.2.</span> <span class="toc-text">2.Link&#x2F;NavLink</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC"><span class="toc-number">20.3.</span> <span class="toc-text">3.路由跳转</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%BC%8F"><span class="toc-number">20.4.</span> <span class="toc-text">4.路由模式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-Route"><span class="toc-number">20.5.</span> <span class="toc-text">5.Route</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1"><span class="toc-number">20.6.</span> <span class="toc-text">6.嵌套路由</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-%E4%B8%89%E4%B8%AA%E9%92%A9%E5%AD%90"><span class="toc-number">20.7.</span> <span class="toc-text">7.三个钩子</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E5%8F%82%E6%95%B0%E8%8E%B7%E5%8F%96"><span class="toc-number">20.8.</span> <span class="toc-text">8.参数获取</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-Switch"><span class="toc-number">20.9.</span> <span class="toc-text">9.Switch</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-Redirect"><span class="toc-number">20.10.</span> <span class="toc-text">10.Redirect</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#21-React-Router6"><span class="toc-number">21.</span> <span class="toc-text">21 React Router6</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8"><span class="toc-number">21.1.</span> <span class="toc-text">1.简单使用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%8F%82%E6%95%B0%E5%92%8C%E9%92%A9%E5%AD%90"><span class="toc-number">21.2.</span> <span class="toc-text">2.参数和钩子</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1"><span class="toc-number">21.3.</span> <span class="toc-text">3.嵌套路由</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-Navigate"><span class="toc-number">21.4.</span> <span class="toc-text">4.Navigate</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-NavLink"><span class="toc-number">21.5.</span> <span class="toc-text">5.NavLink</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#22-useMemo"><span class="toc-number">22.</span> <span class="toc-text">22 useMemo</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#23-forwardRef-amp-useImperativeHandle"><span class="toc-number">23.</span> <span class="toc-text">23 forwardRef &amp; useImperativeHandle</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#24-%E5%85%B6%E4%BB%96%E4%B8%8D%E5%B8%B8%E7%94%A8%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0"><span class="toc-number">24.</span> <span class="toc-text">24 其他不常用钩子函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#100-%E4%BD%BF%E7%94%A8FontAwesome"><span class="toc-number">25.</span> <span class="toc-text">100 使用FontAwesome</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96"><span class="toc-number">25.1.</span> <span class="toc-text">1.安装依赖</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%BC%95%E5%85%A5%E7%BB%84%E4%BB%B6"><span class="toc-number">25.2.</span> <span class="toc-text">2.引入组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%BC%95%E5%85%A5%E5%9B%BE%E6%A0%87"><span class="toc-number">25.3.</span> <span class="toc-text">3.引入图标</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6"><span class="toc-number">25.4.</span> <span class="toc-text">4.使用组件</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/blog/java/01%20Spring%20Security%20&amp;%20oauth2/" title="Spring Security &amp; Oauth2"><img src= "" data-lazy-src="/images/spring-security.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Spring Security &amp; Oauth2"/></a><div class="content"><a class="title" href="/blog/java/01%20Spring%20Security%20&amp;%20oauth2/" title="Spring Security &amp; Oauth2">Spring Security &amp; Oauth2</a><time datetime="2024-04-25T07:24:45.000Z" title="发表于 2024-04-25 15:24:45">2024-04-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/02%20JWT%E5%B7%A5%E5%85%B7%E7%B1%BB/" title="JWT工具类"><img src= "" data-lazy-src="/images/jwt.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JWT工具类"/></a><div class="content"><a class="title" href="/blog/java/02%20JWT%E5%B7%A5%E5%85%B7%E7%B1%BB/" title="JWT工具类">JWT工具类</a><time datetime="2024-04-25T07:24:45.000Z" title="发表于 2024-04-25 15:24:45">2024-04-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/00%20Security%20%E9%9B%86%E6%88%90%E7%A4%BA%E4%BE%8B/" title="SpringSecurity 集成示例"><img src= "" data-lazy-src="/images/spring-security.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SpringSecurity 集成示例"/></a><div class="content"><a class="title" href="/blog/java/00%20Security%20%E9%9B%86%E6%88%90%E7%A4%BA%E4%BE%8B/" title="SpringSecurity 集成示例">SpringSecurity 集成示例</a><time datetime="2024-04-25T07:24:43.000Z" title="发表于 2024-04-25 15:24:43">2024-04-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/101%20Mybatis-plus%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="MybatisPlus 快速集成"><img src= "" data-lazy-src="/images/mybatis-plus.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="MybatisPlus 快速集成"/></a><div class="content"><a class="title" href="/blog/java/101%20Mybatis-plus%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="MybatisPlus 快速集成">MybatisPlus 快速集成</a><time datetime="2024-04-21T07:39:43.000Z" title="发表于 2024-04-21 15:39:43">2024-04-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/blog/java/10%20Mybatis%20%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="Mybatis 快速集成"><img src= "" data-lazy-src="/images/mybaits.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Mybatis 快速集成"/></a><div class="content"><a class="title" href="/blog/java/10%20Mybatis%20%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90/" title="Mybatis 快速集成">Mybatis 快速集成</a><time datetime="2024-04-21T07:24:43.000Z" title="发表于 2024-04-21 15:24:43">2024-04-21</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By mowei</div><div class="footer_custom_text">海内存知已，天涯若比邻</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>if (document.getElementsByClassName('mermaid').length) {
  if (window.mermaidJsLoad) mermaid.init()
  else {
    getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(() => {
      window.mermaidJsLoad = true
      mermaid.initialize({
        theme: 'default',
      })
      true && mermaid.init()
    })
  }
}</script></div><div class="aplayer no-destroy" data-id="9385310356" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.removeEventListener('scroll', window.tocScrollFn)
  window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script src="/live2d_models/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2d_models/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2d_models/assets/wanko.model.json"},"display":{"position":"left","width":100,"height":150,"hOffset":-10,"vOffset":40},"mobile":{"show":true},"react":{"opacity":0.7},"log":false});</script></body></html>